<style lang="scss" scoped>
    .map{
        position:relative;
        width:100%;
        display:flex;

        .map-item{
            margin-right:5px;
        }

    }
</style>

<template>
    <div class="map">
        <div class="map-item">
            <Select v-model="formItem.provice" @on-change="computeCityList" placeholder="请选择" width="80">
                <template v-for="item in Object.keys(province_list)">
                    <Option :value="item"  >{{province_list[item]}}</Option>
                </template>
            </Select>
        </div>
        <div class="map-item">省</div>
        <div class="map-item">
            <Select v-model="formItem.city" @on-change="changeComplete" placeholder="请选择">
                <template v-for="item in Object.keys(city_list)">
                    <Option :value="item"  >{{city_list[item]}}</Option>
                </template>
            </Select>
        </div>
        <div class="map-item">市</div>
    </div>
</template>

<script>
const areaData = require('./Area.js').default
// console.log(areaData)
export default {
    name:'Map',
    data(){
        return {
            formItem:{
                provice:'110000',
                proviceName:'',
                city:'110100',
                cityName:''
            },
            province_list:areaData['province_list'],
            city_list:areaData['city_list']
        }
    },
    methods: {
        computeCityList(str){
            let code = str || this.formItem.provice
            this.formItem.proviceName = areaData['province_list'][code]
            let cityCodeList = Object.keys(areaData['city_list']).filter(item =>{
                return `${code}`.slice(0,2) == `${item}`.slice(0,2)
            })
            this.city_list = {}
            cityCodeList.forEach(item =>{
                this.city_list[item] = areaData['city_list'][item]
            })
            this.formItem.city = cityCodeList[0]
            this.formItem.cityName = areaData['city_list'][cityCodeList[0]]
            // console.log(this.formItem)
        },
        changeComplete(){
            this.formItem.cityName = areaData['city_list'][this.formItem.city]
            console.log(this.formItem)
            this.$emit('mapSuccess',this.formItem)
        }
    },
    mounted() {
        this.computeCityList('110000')
    },
}
</script>